import React, { useState } from "react";
//useSelector 获取仓库数据  useDispatch 调用仓库方法的
import { useSelector, useDispatch } from "react-redux";
import { exchangeCity } from "../../store/CitySliceReducer";
import {
  ResultPage,
  Button,
  Swiper,
  Image,
  CalendarPickerView,
  Popup,
} from "antd-mobile";
import { useNavigate } from "react-router-dom";
import styles from "./home.module.css";
import { LoopOutline } from "antd-mobile-icons";
import dayjs from "dayjs";
function Index() {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { start, end } = useSelector((state) => state.CityReducer);
  const [visible5, setVisible5] = useState(false);
  const [cityDate, setCityDate] = useState(dayjs().format("YYYY-MM-DD"));
  const [cityDateWeek, setCityDateWeek] = useState(dayjs().format("dddd"));
  const [isSpeed, setIsSpeed] = useState(false);
  const banners = [
    "https://img1.baidu.com/it/u=481619078,2574824241&fm=253&fmt=auto&app=138&f=JPEG?w=900&h=450",
    "https://img1.baidu.com/it/u=3884182232,3674383931&fm=253&fmt=auto&app=138&f=JPEG?w=1536&h=800",
  ];

  const handelExChange = () => {
    dispatch(exchangeCity());
  };

  const handelChangeData = (val) => {
    const data = dayjs(val).format("YYYY-MM-DD");
    setCityDate(data);
    setCityDateWeek(dayjs(val).format("dddd"));
    setVisible5(false);
  };

  const handelToList = () => {
    navigate(
      `/list?start=${start}&end=${end}&date=${cityDate}&isSpeed=${isSpeed}`
    );
  };

  return (
    <div className="box">
      <ResultPage
        className={styles.resultPage}
        status=""
        title="火车票预订"
        description="便捷购票，服务您的每一次出行"
      >
        <ResultPage.Card style={{ padding: 8 }}>
          <div className={styles.CardRow}>
            <span onClick={() => navigate("/city/start")}>{start}</span>
            <LoopOutline fontSize={26} onClick={() => handelExChange()} />
            <span onClick={() => navigate("/city/end")}>{end}</span>
          </div>
          <div className={styles.CardRow} onClick={() => setVisible5(true)}>
            <div>
              <span className={styles.day}>{cityDate}</span>
              <span>{cityDateWeek}</span>
            </div>
          </div>
          <div className={styles.CardRow}>
            <Button
              block
              color="warning"
              shape="rounded"
              onClick={() => handelToList()}
            >
              搜索
            </Button>
          </div>
          <Swiper autoplay>
            {banners.map((item, ind) => (
              <Swiper.Item key={ind}>
                <Image src={item} alt="" />
              </Swiper.Item>
            ))}
          </Swiper>
        </ResultPage.Card>
      </ResultPage>
      <Popup
        visible={visible5}
        onMaskClick={() => {
          setVisible5(false);
        }}
        bodyStyle={{
          borderTopLeftRadius: "8px",
          borderTopRightRadius: "8px",
          minHeight: "40vh",
        }}
      >
        <CalendarPickerView
          min={Date.now()}
          max={Date.now() + 14 * 24 * 60 * 60 * 1000}
          onChange={(val) => handelChangeData(val)}
        />
      </Popup>
    </div>
  );
}

export default Index;
